html {
    width: 100%;
    height: 100%;
}
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:linear-gradient(#021317,#293841,#80afa3,#ded8c9);
    position:relative;
    overflow:hidden;
}
.moon{
    width:50px;
    height:50px;
    border-radius:50%;
    position:absolute;
    box-shadow:inset 10px -10px rgba(255,255,255,.9);
    top:10%;
    left:20%;
}
.mountain{
    position:absolute;
    width:0;
    height:0;
    border-right:250px solid transparent;
    border-left:250px solid transparent;
    border-bottom:150px solid #1f2b33;
    bottom:50px;
    left:-40%;
    z-index:1;
}
.mountain.two{
    border-bottom:150px solid #1b2328;
    bottom:30px;
    left:-10%;
}
.land{
    width:200%;height:200px;
    position:absolute;
    border-radius:50%;
    background:#192128;
    left:-50%;
    z-index:2;
    bottom:-100px;
}
h2{
    color:#fff;
    font-size:20px;
    font-weight:300;
    leftter-spacing:3px;
    right:10%;
    position:absolute;
    top:2%;
}
h2 span{
    font-size:14px;
    leftter-spacing:1px;
    opacity:0.6;
}
.house{
    width:200px;
    height:89px;
    position:absolute;
    right:-9px;
    bottom:32px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scale(0.5);

}
.roof1{
    position:absolute;
    width:140px;
    height:60px;
   background:#100a0e;
   transform:skew(-40deg,-8deg);
   top:-60px;
   right:60px;
}
.wall1{
    background:#232e38;
    height:100%;
    flex:3;
    transform:skew(0,-8deg);
}
.wall2{
    flex:2;
    background:#2f3c44;
    height:100%;
    transform:skew(0,10deg);
}
.attic{
    width:0;
    height:0;
    position:absolute;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    border-bottom:55px solid #2f3c44;
    top:-54px;
}
.wall1 .window{
    width:26px;
    height:26px;
    background:#f5edae;
    position:absolute;
    left:54%;
    margin-top:31px;
    box-shadow:0 0 10px #f5edae;
}
.wall1 .window:before{
    content:'';
    width:100%;
    height:2px;
    background:rgba(0,0,0,0.6);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.wall1 .window:after{
    content:'';
    width:2px;
    height:100%;
    background:rgba(0,0,0,0.6);
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
}
.roof2{
    width:140px;
    height:70px;
    position:absolute;
    background:#100a0e;
    border-right:0;
    box-shadow:-4px 4px 10px rgba(0,0,0,0.4);
    transform:skew(40deg,-8deg);
    top:-60px;
    right:6px;
}
.snow-box{
    width:200%;
    height:100%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    bottom:0;
    animation: 12s snow_moving linear forwards infinite;
    transform:translateY(-100%);

}
.snow-box:nth-of-type(2n){
    animation-delay:6s;
}
@keyframes snow_moving{
    0%{
        transform:translateY(-100%);
    }
    100%{
        transform:translateY(100%);
    }
}
.snowflake{
    width:6px;
    height:6px;
    background:rgba(255,255,255,0.7);
    border-radius:50%;
    position:absolute;
    top:0;
    left:0;
    animation:5s flake_moving linear forwards infinite;
}
.snowflake:nth-of-type(2n){
    animation-delay:2.5s;
}
@keyframes flake_moving{
    0%{
        transform:translateX(0%)
    }
    50%{
        transform:translateX(-500%)
    }
    100%{
        transform:translateX(0%)
    }
}
.smaller .snowflake{
    width:4px;
    height:4px;

}
.smallest .snowflake{
    width:2px;
    height:2px;
    
}